<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>myQuery</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
    </style>
    <script src="./myQuery.js"></script>
</head>
<body>
    <button></button>
    <button>button</button>
    <input type="text" class="inp aa bb" value="Jimmy">
    <input type="text" class="jimmt" value="xuexue">
    <div class="div1"></div>
    <div class="div2"></div>
    <p>我是第一个p标签</p>
    <ul class="ul1">
        <li id="box1">#box1li标签</li>
        <li id="box2">#box2li标签</li>
        <li id="box3">#box3li标签</li>
    </ul>
    <ul class="ul2">
        <li class="box1">ul2的li标签</li>
        <li class="box2">ul2的li标签</li>
        <li class="box3">ul2的li标签</li>
    </ul>
    <script>
        // console.log(new myQuery('li'))

        // console.log(new myQuery([1,2,3,4,5]))
        // console.log({name:'jimmy',age:22})
        // console.log(new myQuery({0:'jimmy',1:'22'}))
        // console.log(new myQuery({name:'jimmy',age:22}))

        // new myQuery(()=>{
        //     let res = document.querySelectorAll('li')
        //     console.log(res)
        // })
        // 查看版本
        // console.log(myQuery.Version)

        // let myli = new myQuery('li').toArray()
        // console.log(myli)

        // let myli = new myQuery('li')
        // console.log(myli.toArray())

        // console.log(myli.get())
        // console.log(myli.get(1))
        // console.log(myli.get(2))
        // console.log(myli.get(-3))
        // console.log(myli.eq())
        // console.log(myli.eq(1))
        // console.log(myli.eq(-1))
        
        let arr = [1,3,5,7,9]
        let obj = {name:'jimmy',age:22}

        // new myQuery().each(arr,function(item,value){
        //     console.log(this)
        //     // return的方法都是就近原则 离哪个方法近，就会将值返回给哪个function
        //     if(item === 3){
        //         return true
        //     }
        //     console.log(item,value)
        // })
        // new myQuery().each(obj,(item,value)=>{
        //     console.log(item,value)
        // })
        // let res = new myQuery().each(obj,()=>{})
        // console.log(res)

        // let res = new myQuery().map(arr,(value,index)=>{
        //     if(value>=3){
        //         return value
        //     }
        // })
        // console.log(res)

        // new myQuery('ul').empty()

        // 删除ul结点
        // let btn = document.querySelector('button')
        // btn.addEventListener('click',()=>{

        // })
        // addEventListener addEventListener addEventListener  addEventListener
        // new myQuery('button').eq(0).addEventListener('click',()=>{
        //     alert('123')
        //     new myQuery('ul').remove('#box1')
        // })
        
        // new myQuery('button').eq(0).addEventListener('click',()=>{
        //     // new myQuery('ul').html('<p>i am jimmy</p>')
        //     console.log(new myQuery('ul').text('123'))
        //     new myQuery('ul').text('<h1>i am jimmy</h1>')
        // })
        // new myQuery('button').eq(0).addEventListener('click',()=>{
        //     // alert('hello')
        //     // 将p标签添加到ul标签之后
        //     new myQuery('p').prependTo('ul')
        // })
        // new myQuery('button').eq(0).addEventListener('click',()=>{
        //     // let ni = new myQuery('.box1')
        //     // ni.insertBefore('ul')
        // })
        // new myQuery('button').eq(0).addEventListener('click',()=>{
        //     // let res = new myQuery('#box1').attr('id','jimmy')
        //     // console.log(res)
        //     let res = new myQuery('input').toggleClass('jimmt')
        //     // let res = new myQuery('#box1').attr(win)
        //     console.log(res)
        // })
        new myQuery('button').on('click',()=>{
            alert('hello1')
        })
        new myQuery('button').on('click',()=>{
            alert('hello2')
        })
        new myQuery('button').on('click',()=>{
            alert('hello3')
        })
        new myQuery('button').off('click',()=>{
            alert('hello1')
        })
        console.log(new myQuery('button'))
    </script>
</body>
</html>